<template>
  <div>
    <h3 class="title">云手机容器基础信息</h3>
<div style="height: 50px">
    <el-select v-model="value7" clearable placeholder="请选择状态"  v-show="currentTab ==='first'">
      <el-option
          v-for="item in stateOptions"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
    <el-button type="primary" style="margin-left: 10px" class="el-icon-search" size="small" @click="searchServer" v-show="currentTab ==='first'">查询</el-button>
    <el-select v-model="value6" clearable placeholder="请选择云手机容器" style="margin-left: 10px;width: 300px" v-show="currentTab==='first'" multiple>
      <el-option
          v-for="item in containerOptions"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
    <el-select v-model="value8" clearable placeholder="请选择APP" style="margin-left: 10px;width: 300px" v-show="currentTab==='first'">
      <el-option
          v-for="item in appOptions"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
    <el-button type="primary" style="margin-left: 10px" class="el-icon-search" size="small" @click="startContainer" v-show="currentTab==='first'">容器启动</el-button>
    <el-button type="primary" style="margin-left: 10px" class="el-icon-search" size="small" @click="startApp" v-show="currentTab==='first'">APP启动</el-button>
<!--    <el-button type="primary" style="margin-left: 10px" class="el-icon-refresh" size="small" @click="reloadResearch">重置查询条件</el-button>-->
    <el-button type="primary" style="margin-left: 10px;float:right;" class="el-icon-download" size="small" @click="serverInfoExport">导出</el-button>
</div>
<!--    <el-button type="primary" style="float: right" class="el-icon-refresh" @click="refreshData">刷新</el-button>-->
    <el-tabs v-model="baseInfoActiveName" style="margin-top: 10px;" @tab-click="clickEvent">
      <el-tab-pane label="基础信息" name="first"></el-tab-pane>
      <el-tab-pane label="云手机集群启动时长" name="second"></el-tab-pane>
      <el-tab-pane label="APP启动时长" name="third"></el-tab-pane>
      <el-tab-pane label="容器启动时长" name="fourth"></el-tab-pane>
    </el-tabs>
    <title-componet name="云手机容器基础信息列表" v-if="currentTab==='first'&&this.$store.state.titleState"></title-componet>
    <title-componet name="云手机集群启动时长列表" v-if="currentTab==='second'&&this.$store.state.titleState"></title-componet>
    <title-componet name="云手机容器APP启动时长列表" v-if="currentTab==='third'&&this.$store.state.titleState"></title-componet>
    <title-componet name="云手机容器启动时长列表" v-if="currentTab==='fourth'&&this.$store.state.titleState"></title-componet>
<!--    <el-card class="card">-->
      <div v-show="baseInfoActiveName==='first'">
      <div slot="header" class="clearfix">
<!--        <span><b>基础信息</b></span>-->
      </div>
    <el-table
        class="InfoData"
        :data="this.$dataPage(this.cloudPhoneData,this.baseCurrentPage,this.basePageSize).pageData"
        :header-cell-style="this.$handleheader"
        :row-style="this.$rowstyle"
        :cell-style="this.$cellstyle"
        border
    >
<!--      <el-table-column-->
<!--          type="selection"-->
<!--          width="55">-->
<!--      </el-table-column>-->
      <el-table-column
          prop="id"
          label="编号"
          width="80"
          sortable
          header-align="center"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="container_type"
          label="云手机容器类型"
          width="120"
          header-align="center"
      >
      </el-table-column>
      <el-table-column
          prop="container_name"
          label="云手机容器名称"
          width="120"
          header-align="center"
      >
      </el-table-column>
      <el-table-column
          prop="container_cpu"
          label="绑定的cpu核心"
          header-align="center"
          width="200"
      >
      </el-table-column>
      <el-table-column
          prop="server_id__server_name"
          label="服务器名称"
          header-align="center"
          width="150"
          sortable
      >
      </el-table-column>
      <el-table-column
          prop="container_port"
          label="云手机容器端口"
          header-align="center"
      >
      </el-table-column>
      <el-table-column
          prop="container_state"
          label="云手机容器状态"
          width="120"
          header-align="center"
      >
      </el-table-column>
      <el-table-column
          prop="time"
          label="操作时间"
          header-align="center"
          sortable
      >
      </el-table-column>
    </el-table>
        <page :current-page="baseCurrentPage" :page-size="basePageSize" :total="baseTotal" @handleChange="handleBaseChange"></page>
      </div>
<!--      </el-card>-->
      <div v-show="baseInfoActiveName==='second'">
      <div slot="header" class="clearfix">
<!--        <span><b>云手机集群数据</b></span>-->
      </div>
    <el-table
        class="InfoData"
        :data="this.$dataPage(this.clusterData,this.clusterCurrentPage,this.clusterPageSize).pageData"
        :header-cell-style="this.$handleheader"
        :row-style="this.$rowstyle"
        :cell-style="this.$cellstyle"
        border
    >
<!--      <el-table-column-->
<!--          type="selection"-->
<!--          width="55">-->
<!--      </el-table-column>-->
      <el-table-column
          prop="id"
          label="编号"
          width="80"
          sortable
          header-align="center"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="cluster_size"
          label="集群云手机容器数量"
          width="130"
          header-align="center"
      />
      <el-table-column
          prop="cluster_container"
          label="集群云手机容器名称"
          header-align="center"
      />
      <el-table-column
          prop="cluster_detail"
          label="集群云手机容器启动情况"
          header-align="center"
      />
      <el-table-column
          prop="cluster_time"
          label="云手机集群启动总时间(s)"
          width="250"
          header-align="center"
          :formatter="rounding"
      >
      </el-table-column>
      <el-table-column
          prop="server_id__server_name"
          label="服务器名称"
          width="140"
          header-align="center"
      >
      </el-table-column>
      <el-table-column
          prop="time"
          label="测评时间"
          header-align="center"
          sortable
      >
      </el-table-column>
    </el-table>
        <page :current-page="clusterCurrentPage" :page-size="clusterPageSize" :total="clusterTotal" @handleChange="handleClusterChange"></page>
      </div>
      <div v-show="baseInfoActiveName==='third'">
      <div slot="header" class="clearfix">
<!--        <span><b>APP启动数据</b></span>-->
      </div>
    <el-table
        class="InfoData"
        :data="this.$dataPage(this.appData,this.appCurrentPage,this.appPageSize).pageData"
        :header-cell-style="this.$handleheader"
        :row-style="this.$rowstyle"
        :cell-style="this.$cellstyle"
        border
    >
<!--      <el-table-column-->
<!--          type="selection"-->
<!--          width="55">-->
<!--      </el-table-column>-->
      <el-table-column
          prop="id"
          label="编号"
          width="80"
          sortable
          header-align="center"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="app_time"
          label="云手机容器内APP应用启动时长(s)"
          header-align="center"
          width="250"
          :formatter="this.$fixTwo"
      />
      <el-table-column
          prop="container_id__container_name"
          label="云手机容器名称"
          width="220"
          header-align="center"
      >
      </el-table-column>
      <el-table-column
          prop="app_id__name"
          label="APP名称"
          width="220"
          header-align="center"
      >
      </el-table-column>
      <el-table-column
          prop="time"
          label="测评时间"
          header-align="center"
          sortable
      >
      </el-table-column>
<!--      <el-table-column-->
<!--          label="操作"-->
<!--          header-align="center"-->
<!--          align='center'-->
<!--          width="200"-->
<!--      >-->
<!--        <template>-->
<!--          <el-button type="text" style="margin-left: 10px">查看</el-button>-->
<!--          <el-button type="text" style="margin-left: 10px">删除</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
        <page :current-page="appCurrentPage" :page-size="appPageSize" :total="appTotal" @handleChange="handleAppChange"></page>

<!--    <el-pagination-->
<!--        style="margin-top: 10px; text-align: right;"-->
<!--        background-->
<!--        layout="total, prev, pager, next"-->
<!--        :current-page="currentPage"-->
<!--        :page-size="pageSize"-->
<!--        :total="total"-->
<!--        @current-change="handleCurrentChange">-->
<!--    </el-pagination>-->
      </div>
    <div v-show="baseInfoActiveName==='fourth'">
      <div slot="header" class="clearfix">
        <!--        <span><b>APP启动数据</b></span>-->
<!--        :data="containerTimeData.slice((this.timeCurrentPage - 1) * this.timePageSize,this.timeCurrentPage * this.timePageSize)"-->
      </div>
      <el-table
          class="InfoData"
          :data="this.$dataPage(this.containerTimeData,this.timeCurrentPage,this.timePageSize).pageData"
          :header-cell-style="this.$handleheader"
          :row-style="this.$rowstyle"
          :cell-style="this.$cellstyle"
          border
      >
<!--        <el-table-column-->
<!--            type="selection"-->
<!--            width="55">-->
<!--        </el-table-column>-->
        <el-table-column
            prop="id"
            label="编号"
            width="80"
            sortable
            header-align="center"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="container_single_time"
            label="云手机容器的启动时间(s)"
            header-align="center"
            :formatter="rounding"
            width="200"
        />
        <el-table-column
            prop="container_id__container_name"
            label="云手机容器名称"
            header-align="center"
            width="200"
        />
        <el-table-column
            prop="time"
            label="测评时间"
            header-align="center"
            sortable
        >
        </el-table-column>
      </el-table>
      <page :current-page="timeCurrentPage" :page-size="timePageSize" :total="timeTotal" @handleChange="handleTimeChange"></page>

    </div>
    <div class="explain" v-show="this.currentTab==='first'">注:可通过下拉列表启动容器。点击启动APP按钮开始启动app。选择一个容器则启动单容器，选择多个容器则启动集群。APP启动需要选择一个容器和一个APP</div>
    <div class="explain" v-show="this.currentTab==='second'">注:可通过选择服务器和输入云手机数量进行查询。两种查询只能选其一进行。</div>
<!--    <div class="explain" v-show="this.currentTab==='third'">注:APP为地铁跑酷。</div>-->
    <div class="explain" v-show="this.currentTab==='fourth'">注:可通过选择服务器和选择具体云手机容器进行查询。两种查询只能选其一进行。</div>
    <el-dialog
        title="导出信息填写"
        :visible.sync="exportVisible"
        width="30%"
        :show-close="false"
        :close-on-click-modal="false">

      <el-form ref="form" :model="exportForm" label-width="80px" inline :rules="exportRules">
        <el-form-item label="文件名" prop="name">
          <el-input v-model="exportForm.name"></el-input>
        </el-form-item>
<!--        <el-form-item label="高度" prop="height">-->
<!--          <el-input v-model="exportForm.height"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="宽度" prop="width">-->
<!--          <el-input v-model="exportForm.width"></el-input>-->
<!--        </el-form-item>-->
      </el-form>
<!--      <span style="color: red">*高度建议不超过500，宽度不超过1000</span>-->
      <span slot="footer" class="dialog-footer">
    <el-button @click="exportVisible = false">取 消</el-button>
    <el-button type="primary" @click="startExport('cloudPhoneBaseInfo_1',cloudPhoneData,'cloudPhoneData'),exportVisible=false" v-if="currentTab === 'first'">确 定</el-button>
    <el-button type="primary" @click="startExport('cloudPhoneBaseInfo_2',clusterData,'clusterData',exportVisible=false)" v-if="currentTab === 'second'">确 定</el-button>
    <el-button type="primary" @click="startExport('cloudPhoneBaseInfo_3',appData,'appData',exportVisible=false)" v-if="currentTab === 'third'">确 定</el-button>
    <el-button type="primary" @click="startExport('cloudPhoneBaseInfo_4',containerTimeData,'containerTimeData',exportVisible=false)" v-if="currentTab === 'fourth'">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>

import Page from "@/components/page";
import TitleComponet from "@/components/titleComponet";
import {exportMixin} from "@/components/mixin";
import {
  appList,
  clusterContainerStartList, clusterContainerStartTime,
  containerAllList,
  containerAppData, containerAppStart,
  containerList,
  containerStartTime, oneContainerStartTime,
  serverClusterContainerStartList,
  serverContainerStartTime, singleContainerStartTime,
  sizeClusterContainerStartList,
  stateList
} from "@/api/perf";
import moment from "moment";

export default {
  name: "cloudPhoneManager",
  components: {TitleComponet, Page},
  mixins : [exportMixin],
  data() {
    return{
      timeCurrentPage:1,
      timePageSize:10,
      timeTotal:'',
      appCurrentPage:1,
      appPageSize:10,
      appTotal:'',
      baseCurrentPage:1,
      basePageSize:10,
      baseTotal:'',
      clusterCurrentPage:1,
      clusterPageSize:10,
      clusterTotal:'',
      baseInfoActiveName:'first',
      // value3:this.$store.state.server.serverId,
      value3:'',
      value4:'',
      value5:'',
      value6:'',
      value8:'',
      containerOptions:[],
      serverOptions:this.$store.state.serverList,
      cloudPhoneData:null,
      currentTab:'first',
      clusterData:null,
      appData:null,
      containerTimeData:null,
      appOptions:[],
      options: [{
        value: '选项1',
        label: '视频流'
      }, {
        value: '选项2',
        label: '指令流'
      }],
      value: '',
      value2:[],
      line:null,
      inter:null,
      graphData:[],
      chartInstance:null,
      allInterval:null,
      stateOptions:[{
        value:'未创建',
        label:'未创建'
      },
        {
          value:'创建中',
          label:'创建中'
        },
        {
          value:'已创建',
          label:'已创建'
        },
        {
          value:'全部',
          label:'全部'
        }],
      value7:''
    }
  },
  created() {
      this.initContainerData()
      this.initStartData()
      this.initClusterData()
      this.initAppData()
      this.initContainerArr()
      this.initAppArr()
  },
  methods:{
    tttt() {
      clearInterval(this.allInterval)
      this.allInterval = null
      console.log('让我看看清掉没',this.allInterval)
    },
    initStartData() {
      containerStartTime().then(res=>{
      // axios.get(this.$ip2 +'/container/start/all').then(res=>{
        console.log('startData',res.data);
        this.containerTimeData = res.data
        this.timeTotal = res.data.length
        for (let i =0;i<res.data.length;i++){
          this.containerTimeData[i].id = i + 1
          this.containerTimeData[i].time = moment(this.containerTimeData[i].time).format('YYYY-MM-DD HH:mm:ss')
          if (this.containerTimeData[i].container_single_time === null) {
            this.containerTimeData[i].container_single_time = 0
          }
        }
      })

    },
    handleTimeChange(val) {
      console.log(val)
      this.timeCurrentPage = val
    },
    //保留两位小数方法
    rounding(row,column) {
      return parseFloat(row[column.property]).toFixed(2)
    },
    initAppData() {
      containerAppData(this.$store.state.server.serverId).then(res=>{
        console.log("app",res)
      // axios.get(this.$ip2 + '/container/app/server?server_id=' + this.$store.state.server.serverId).then(res=>{
        console.log("appdata",res.data)
        this.appData = res.data
        this.appTotal = res.data.length
        for (let i =0;i<res.data.length;i++){
          this.appData[i].id = i + 1
          this.appData[i].time = moment(this.appData[i].time).format('YYYY-MM-DD HH:mm:ss')
          if (this.appData[i].app_time === null) {
            this.appData[i].app_time = 0
          }
        }
      })
    },
    initClusterData() {
      clusterContainerStartList().then(res=>{
        console.log('cluster',res)
      // axios.get(this.$ip2 +'/container/cluster/all').then(res=>{
        console.log('clusterData',res.data)
        this.clusterData = res.data
        this.clusterTotal = res.data.length
        for (let i =0;i<res.data.length;i++){
          this.clusterData[i].id = i + 1
          this.clusterData[i].time = moment(this.clusterData[i].time).format('YYYY-MM-DD HH:mm:ss')
          if (this.clusterData[i].cluster_time === null) {
            this.clusterData[i].cluster_time = 0
          }
        }
        // this.clusterData = addNumber(this.clusterData, res.data.length)
      })
    },
    initAppArr() {
      appList().then(res=>{
        console.log("app",res)
      // axios.get(this.$ip2 + '/container/app').then(res=>{
        for (let i = 0; i < res.data.length; i ++) {
          this.appOptions.push({
            value : res.data[i].id,
            label : res.data[i].name
          })
        }
        console.log('huanghuang',this.appOptions);
      })
    },
    initContainerArr() {
      containerAllList().then(res=>{
        console.log("第一个",res)
      // axios.get(this.$ip2 +'/container/all').then(res=>{
        for (let i =0;i<res.data.length;i++){
          // this.cloudPhoneData[i].id = i + 1
          this.containerOptions.push({
            value:res.data[i].container_id,
            label:res.data[i].container_name
          })
        }
        console.log('?Sdasdas',this.containerOptions);
      })
    },
    initContainerData() {
      containerAllList().then(res=>{
      // axios.get(this.$ip2 +'/container/all').then(res=>{
        // console.log('????',res.data.reverse());
        // this.cloudPhoneData=res.data.reverse()
        console.log('containerData',res.data)
        this.cloudPhoneData=res.data
        this.baseTotal = res.data.length
        for (let i =0;i<res.data.length;i++){
          this.cloudPhoneData[i].id = i + 1
          this.cloudPhoneData[i].time = moment(this.cloudPhoneData[i].time).format('YYYY-MM-DD HH:mm:ss')
        }
      })
    },
    handleAppChange(val) {
      this.appCurrentPage = val
    },
    handleBaseChange(val) {
      this.baseCurrentPage = val
    },
    handleClusterChange(val) {
      this.clusterCurrentPage = val
    },
    searchServer() {
      clearInterval(this.allInterval)
      this.allInterval = null
      console.log(' 让我看看情调没',this.allInterval)
      console.log(this.currentTab);
      if (this.currentTab ==='first') {
        if (this.value3!=='' && this.value7==='') {
          containerList(this.value3).then(res=>{
          // axios.get(this.$ip2 + '/container/list/?server_id=' + this.value3).then(res=>{
            console.log(res);
            this.cloudPhoneData = res.data
            this.baseTotal =res.data.length
            for (let i =0;i<res.data.length;i++){
              this.cloudPhoneData[i].id = i + 1
            }
            this.refreshMethod('server',this.value3,null)
          })
        }
        else if (this.value3==='' && this.value7!==''){
          if (this.value7!=='全部'){
            stateList(this.value7).then(async res=>{
            // axios.get(this.$ip2 + '/container/state?container_state=' + this.value7).then(async res=>{
              console.log('我不知道',res);
              this.cloudPhoneData = res.data
              this.baseTotal =res.data.length
              for (let i =0;i<res.data.length;i++){
                this.cloudPhoneData[i].id = i + 1
              }
              this.refreshMethod('type',null,this.value7)
              // this.initContainerData()
            })
          }
          else {
            this.initContainerData()
            this.allInterval = setInterval(() =>{
              this.initContainerData()
            },3000)
          }

        }
        else {
          // alert("请重新选择查询条件，查询条件不能为两个")
          this.$message({
            message: '请重新选择查询条件，查询条件不能为两个',
            type: 'warning'
          });
          this.value3 = ''
          this.value7 = ''
        }

      }
      else if (this.currentTab ==='second') {
        if (this.value3!=='' && this.value5==='') {
          serverClusterContainerStartList(this.value3).then(res=>{
          // axios.get(this.$ip2 + '/container/cluster/server/?server_id=' + this.value3).then(res => {
            console.log(res);
            this.clusterData = res.data
            this.clusterTotal = res.data.length
            for (let i = 0; i < res.data.length; i++) {
              this.clusterData[i].id = i + 1
            }
          })
        }
        else if (this.value3==='' && this.value5!=='') {
          sizeClusterContainerStartList(this.value5).then(res=>{
          // axios.get(this.$ip2+'/container/cluster/size?size=' + this.value5).then(res=>{
            this.clusterData = res.data
            this.clusterTotal = res.data.length
            for (let i =0;i<res.data.length;i++){
              this.clusterData[i].id = i + 1
            }
          })
        }
        else {
          // alert("请选择查询条件，且查询条件不能为两个")
          this.$message({
            message: '请重新选择查询条件，查询条件不能为两个',
            type: 'warning'
          });
          this.value3 =''
          this.value5 = ''
        }
      }
      else if (this.currentTab ==='fourth') {
        //按服务器选
          if (this.value3!=='' && this.value4==='') {
            serverContainerStartTime(this.value3).then(res=>{
            // axios.get(this.$ip2+'/container/start/server?server_id=' + this.value3).then(res=>{
              this.containerTimeData = res.data
              this.timeTotal = res.data.length
              for (let i =0;i<res.data.length;i++){
                this.containerTimeData[i].id = i + 1
              }
            })
          }
          //按容器选
        else if (this.value3==='' && this.value4!=='') {
            console.log('没进来？',this.value4)
            oneContainerStartTime(this.value4).then(res=>{
            // axios.get(this.$ip2+'/container/start/container?container_id=' + this.value4).then(res=>{
              console.log(res);
              this.containerTimeData = res.data
              this.timeTotal = res.data.length
              for (let i =0;i<res.data.length;i++){
                this.containerTimeData[i].id = i + 1
              }
            })
        }
        else {
          // alert("请选择查询条件，且查询条件不能为两个")
          this.$message({
            message: '请选择查询条件，且查询条件不能为两个',
            type: 'warning'
          });
          this.value3 =''
          this.value4 = ''
          }
      }

    },
    startApp() {
      if (this.value8 !== '' && this.value6.length !== 0) {
        console.log('weiwei',this.value8)
        this.$message('APP正在启动');
        if (this.value6.length === 1) {
          containerAppStart(this.value8,this.value6[0]).then(res=>{
        // axios.get(this.$ip2 + '/container/app/test?apk_name=' + this.value8 +'&container_id=' + this.value6[0]).then(res => {
          console.log('app启动', res);
          // alert('APP启动成功')
          this.$message({
            message: 'APP启动成功',
            type: 'success'
          });
        })
        }
        else {
          this.$message({
            message: 'APP启动一次只能启动一个容器',
            type: 'warning'
          });
        }
        }
        else {
          this.$message({
            message: '未选择容器或APP',
            type: 'warning'
          });
        }
    },
    startContainer(){
      if (this.value6.length >=2){
        this.$message('集群正在启动');
        // this.initContainerData()
        setTimeout(()=>{
          this.initContainerData()
        },2000)
        let param = ''
        for (let i = 0; i < this.value6.length; i ++) {
          param +=this.value6[i]
          if (i !== this.value6.length - 1) {
            param +=','
          }

        }
        clusterContainerStartTime(param).then(async res=>{
        // clusterContainerStartTime(this.value6[0] + ',' + this.value6[1]).then(async res=>{
        // axios.get(this.$ip2 +'/container/cluster/test?container_list='+this.value6[0]+',' +this.value6[1]).then(async res=>{
          await console.log('集群',res);
          this.$message({
            message: '集群启动成功',
            type: 'success'
          });
          setTimeout(()=> {
            this.refreshData()
          },2000)
        })
      }else {
        this.$message('容器正在启动');
        setTimeout(()=>{
          this.initContainerData()
        },2000)
        singleContainerStartTime(this.value6[0]).then(async res=>{
        // axios.get(this.$ip2 +'/container/start/test?container_id='+this.value6[0]).then(async res=>{
          await console.log('单个',res);
          if (res.data === '云手机容器启动失败') {
            this.$message({
              message: '启动失败',
              type: 'error'
            });
          }
          else {
            this.$message({
              message: '启动成功',
              type: 'success'
            });

          }
          setTimeout(()=> {
            this.refreshData()
          },2000)
        })
      }
    },
    //重置查询条件
    reloadResearch() {
      this.value3 =''
      this.value4 =''
      this.value7 =''
    },
    //刷新所有表格
    refreshData() {
      // this.initStartData()
      // this.initContainerData()
      // this.initClusterData()
      // this.initAppData()
      // this.reloadResearch()
      this.allInterval = null
      clearInterval(this.allInterval = null)

      this.allInterval = setInterval(()=>{
          console.log('我是定时器全部',this.allInterval)
          this.initStartData()
          this.initContainerData()
          this.initClusterData()
          this.initAppData()
        },5000)
      // this.allInterval = null
      // clearInterval(this.allInterval)
      // this.refreshMethod('all',null,null)

    },
    clickEvent(tab, event) {
      this.currentTab = tab.name
      console.log(tab.name);
      this.value3 = ''
    },
    refreshMethod(searchType,server_id,type_id) {
      console.log('清掉了啊',this.allInterval);
      if (searchType === 'server') {
        this.allInterval = setInterval(()=>{
          serverContainerStartTime(server_id).then(res=>{
          // axios.get(this.$ip2+'/container/start/server?server_id=' + server_id).then(res=>{
            this.containerTimeData = res.data
            this.timeTotal = res.data.length
            for (let i =0;i<res.data.length;i++){
              this.containerTimeData[i].id = i + 1
            }
          })
          this.initStartData()
          this.initClusterData()
          this.initAppData()
          // this.reloadResearch()
        },5000)

      }
      else if (searchType === 'type'){
        console.log('现在定时器啥状态？',this.allInterval)
        this.allInterval = setInterval(() =>{
          stateList(type_id).then(res=>{
          // axios.get(this.$ip2 + '/container/state?container_state=' + type_id).then(res=>{
            console.log('我是定时器type')
            this.cloudPhoneData = res.data
            this.baseTotal =res.data.length
            for (let i =0;i<res.data.length;i++){
              this.cloudPhoneData[i].id = i + 1
            }
            // this.initContainerData()
            this.initStartData()
            this.initClusterData()
            this.initAppData()
            // this.reloadResearch()
          })
        },5000)
      }
      // else if (searchType === 'all'){
      //   window.clearInterval(this.allInterval)
      //   this.allInterval = null
      //   console.log('我来了啊')
      //   if (this.allInterval === null) {
      //     this.allInterval = setInterval(()=>{
      //       console.log('我是定时器全部',this.allInterval)
      //       this.initStartData()
      //       this.initContainerData()
      //       this.initClusterData()
      //       this.initAppData()
      //     },5000)
      //   }
      // }

    },
    serverInfoExport() {
      this.exportVisible = true
    },
  },
  mounted() {
    console.log('mounted我来了')
    // this.initChart()

    this.allInterval = setInterval(()=>{
      this.initContainerData()
      this.initStartData()
      this.initClusterData()
      this.initAppData()
      console.log("laile1")
      console.log('mounted里的计时器',this.allInterval);
    },5000)
    // this.refreshMethod('all',null,null)
  },
  beforeDestroy() {
    clearInterval(this.allInterval)
    this.allInterval = null
  }
}
</script>

<style scoped>
.card{
  position: relative;
  width: 100%;
  max-width: 100%;
  padding: 10px 10px 0;
  margin: 10px auto;
  overflow: hidden;
  border: solid white;
}

</style>
